<template>
  <div class="fare-container">
    <el-card class="fare-card">
      <div slot="header" class="clearfix">
        <el-button style="background-color:#e15536; color: #fff;" @click="dialogshow">新增模板</el-button>
      </div>
      <el-table :data="freightTab" stripe style="width: 100%">
        <el-table-column prop="templateType" label="模板类型" width="165">
          <template v-slot="{row}">
            <span v-if="row.templateType===1">同城寄</span>
            <span v-else-if="row.templateType===2">省内寄</span>
            <span v-else-if="row.templateType===3">经济区互寄</span>
            <span v-else-if="row.templateType===4">跨省</span>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型" width="165">
          <template v-slot="{ row }">
            <span v-if="row.transportType === 1">普快</span>
            <span v-else-if="row.transportType === 2">特快</span>
          </template>
        </el-table-column>
        <el-table-column label="关联城市" width="165">
          <template v-slot="{ row }">
            <span v-if="row.associatedCityList[0] === '1' || row.associatedCityList[0] === '全国'">全国</span>
            <span v-if="row.associatedCityList[0] === '2'|| row.associatedCityList[0] === '京津冀'">京津冀</span>
            <span v-if="row.associatedCityList[0] === '3'|| row.associatedCityList[0] === '江浙沪'">江浙沪</span>
            <span v-if="row.associatedCityList[0] === '4' || row.associatedCityList[0] === '川渝'">川渝</span>
            <span v-if="row.associatedCityList[0] === '5' || row.associatedCityList[0] === '黑吉辽'">黑吉辽</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" width="180" />
        <el-table-column prop="continuousWeight" label="续重" width="180" />
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" width="180" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="editFare(row)">编辑</el-button>
            <el-button type="text" @click="delFare(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="close"
    >
      <el-form ref="addTabForm" :model="addTabForm" :rules="rules" label-width="80px" style="padding: 0 40px;">
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="addTabForm.templateType" placeholder="请选择模板类型" style="width: 100%;">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="addTabForm.transportType" placeholder="请选择运送类型" style="width: 100%;">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="associatedCityList">

          <el-checkbox-group v-model="addTabForm.associatedCityList" @change="handleCheckedCitiesChange">
            <el-row type="flex">
              <el-checkbox :value="1" label="全国" name="associatedCityList" />
              <el-checkbox :value="2" label="京津冀" name="associatedCityList" />
              <el-checkbox :value="3" label="江浙沪" name="associatedCityList" />
              <el-checkbox :value="4" label="川渝" name="associatedCityList" />
              <el-checkbox :value="5" label="黑吉辽" name="associatedCityList" />
            </el-row>
          </el-checkbox-group>

        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="addTabForm.firstWeight" />
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="addTabForm.continuousWeight" />
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="addTabForm.lightThrowingCoefficient" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-button type="primary" class="confirm" @click="isOkBtn">确 认</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { freightTab, delFreight, addFreightTab } from '@/api/basic'
export default {
  data() {
    return {
      title: '新增模板',
      dialogVisible: false, // 对话框
      freightTab: [], // 渲染页面
      addTabForm: {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: ''// 轻抛系数
      },
      rules: {
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'blur' }
        ],
        associatedCityList: [
          { type: 'array', required: true, message: '请至少选择一个关联城市', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.freightTabList()
  },
  methods: {

    // 关闭对话框
    close() {
      this.dialogVisible = false
      this.addTabForm = {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: ''// 轻抛系数
      }
      this.$refs.addTabForm.resetFields()
      this.freightTabList()
    },

    // 获取运费列表
    async freightTabList() {
      const res = await freightTab()
      this.freightTab = res.data.data
    },

    // 点击新增弹出模态框
    dialogshow() {
      this.title = '新增模板'
      this.dialogVisible = true
    },

    // 点击确认-新增
    async isOkBtn() {
      await this.$refs.addTabForm.validate()
      if (this.title === '新增模板') {
        const res = await addFreightTab(this.addTabForm)
        if (res.data.code === 200) {
          this.$message.success('新增成功')
        }
      } else {
        const res = await addFreightTab(this.addTabForm)
        if (res.data.code === 200) {
          this.$message.success('编辑成功')
        }
      }
      this.freightTabList()// 重新渲染列表
      this.close()
    },

    // 编辑
    editFare(row) {
      // console.log(row)
      this.title = '编辑模板'
      this.addTabForm = row
      this.dialogVisible = true
    },

    // 删除运费模板
    delFare(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delFreight(id)// 删除
        this.freightTabList()// 重新渲染
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    handleCheckedCitiesChange(id) {
      // console.log(id)
    }

  }
}
</script>

<style scoped lang="scss">
.fare-container {
  width: 1300px;
  padding: 20px;
}

.fare-card {
  padding: 28px;
}
.confirm{
  background-color:#e15536;
  color: #fff;
  margin-right: 20px;
}
</style>
